<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="zh-cn">
<head>
<base href="<%=basePath%>">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta http-equiv="Content-Language" content="zh-cn">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="mobile-agent" content="">
    <meta name="applicable-device" content="pc">
    <title>MV库 - QQ音乐-千万正版音乐海量无损曲库新歌热歌天天畅听的高品质音乐平台！</title>
	<link rel="stylesheet" href="static/mv/css/layout_0412.css">
    <link rel="stylesheet" href="static/mv/css/mv.css">
	<link rel="stylesheet" href="static/mv/css/popup_login.css">
	<link rel="stylesheet" href="static/mv/css/qb-ie-remind.css">
</head>
<body class="os_mac">
   	<!-- 头部 N -->
		<jsp:include page="musicTop.jsp"></jsp:include>
   	<!-- 头部 S -->
    
    
    <div class="main" style="">
        <!-- 标签筛选 -->
	        <div class="mod_tag" id="mv_tags">
			    <div class="tag__list js_tags_area">
					<h3 class="tag__tit">区域</h3>
					<a class="tag__item tag__item--select">全部</a>
					<a class="tag__item">内地</a>
					<a class="tag__item">港台</a>
					<a class="tag__item">欧美</a>
					<a class="tag__item">韩国</a>
					<a class="tag__item">日本</a>
			    </div>
			
			    <div class="tag__list js_tags_version">
					<h3 class="tag__tit">版本</h3>
					<a href="front/mv_list" class="tag__item tag__item--select">全部</a>
					<c:forEach items="${queryMvTypeList }" var="queryMvType">
						<a href="front/queryMvTypeId?mvTypeId=${queryMvType.mvTypeId }" class="tag__item">${queryMvType.mvTypeName }</a>
					</c:forEach>
			    </div>
			</div>
            
        	<div class="mod_part_detail">
            	<div class="part_detail__hd">
                	<div class="part_switch">
	                    <a class="part_switch__item part_switch__item--left part_switch__item--select">最新</a>
	                    <a class="part_switch__item part_switch__item--right">最热</a>
                	</div>
           		</div>
        
        		<div class="mod_mv">
                	<ul class="mv_list__list">
						   <!-- 循环mv列表 -->
						<c:if test="${queryMvTypeIdList==null }">
						<c:forEach items="${mvList}" var="mv">
								<li class="mv_list__item">
									<div class="mv_list__item_box">
										<!--<img class="mv_list__pic" src="${mv.mvPhoto }">-->
										<video id="my-video" class="video-js" controls preload="auto" 
													width="285" 
													height="161.15"
													poster="${mv.mvPhoto }" >
												<!--<img class="mv_list__pic" src="#" style="display: block; visibility: visible;">-->
												<source src="${mv.mvMp4 }" type="video/mp4">
										</video>
										<!--<i class="mod_cover__icon_play"></i>-->
										<h3 class="mv_list__title"><a>${mv.mvName}</a></h3>
										<div class="mv_list__singer">
											<a href="singer/list2?musicId=${mv.musicId }&singerId=${mv.singerId}"> ${mv.singerName} </a>
										</div>
										<div class="mv_list__info"><span class="mv_list__listen">
										<i class="mv_list__listen_icon sprite"></i>1.1万</span>2019-11-07</div>
									</div>
								</li>
						</c:forEach>
						</c:if>
						<c:if test="${queryMvTypeIdList!=null }">
						<c:forEach items="${queryMvTypeIdList}" var="queryMvTypeId">
								<li class="mv_list__item">
									<div class="mv_list__item_box">
										<!--<img class="mv_list__pic" src="${mv.mvPhoto }">-->
										<video id="my-video" class="video-js" controls preload="auto" 
													width="285" 
													height="161.15"
													poster="${queryMvTypeId.mvPhoto }" >
												<!--<img class="mv_list__pic" src="#" style="display: block; visibility: visible;">-->
												<source src="${queryMvTypeId.mvMp4 }" type="video/mp4">
										</video>
										<!--<i class="mod_cover__icon_play"></i>-->
										<h3 class="mv_list__title"><a href="#">${queryMvTypeId.mvName}</a></h3>
										<div class="mv_list__singer">
											<a href="singer/list2?musicId=${queryMvTypeId.musicId }&singerId=${queryMvTypeId.singerId}"> ${queryMvTypeId.singerName} </a>
										</div>
										<div class="mv_list__info"><span class="mv_list__listen">
										<i class="mv_list__listen_icon sprite"></i>1.1万</span>2019-11-07</div>
									</div>
								</li>
						</c:forEach>
						</c:if>
					</ul>
				</div>
    		
    		</div>
		</div>
        <!-- 尾部 N -->
			<jsp:include page="musicFoot.jsp"></jsp:include>
		<!-- 尾部 S -->
</body>
</html>